<template>
  <div style="width:100%;height:430px;"  v-loading="loadings">
    <el-row style="padding-top:20px;height:100%;">
      <el-col :span="6" class="colImg">
        <img src="../../assets/images/zaixian.png" alt="" v-if="lineType=='line'">
        <img src="../../assets/images/lixian.png" alt="" v-else>
      </el-col>
      <el-col :span="18" style="padding-right:20px;">
        <div class="formDiv">
          <el-form ref="form" :model="form1" label-width="120px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="单位">
                  <el-select v-model="form1.UnitName" @change="handleUnitId" placeholder="请选择单位">
                    <el-option v-for="item in this.UnitNameData" :key="item.id" :label="item.UnitName" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门">
                  <el-input v-model="form1.DeptName" placeholder="请输入部门" @focus="deptOpen()"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="单位ID">
                  <el-input v-model="form1.UnitID" class="inp" placeholder="选择单位后获取" disabled></el-input>
                  <!-- <el-button type="primary" icon="el-icon-share" @click.native="generate"></el-button> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="责任人">
                  <!-- <el-input v-model="form1.EmpName" placeholder="请输入责任人"></el-input> -->
                  <el-select v-model="form1.EmpName" @change="handleEmpData" placeholder="选择部门后获取">
                    <el-option v-for="item in this.EmpData" :key="item.id" :label="item.EmpName" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密级">
                  <el-select v-model="form1.SecLvl" placeholder="请选择密级">
                    <el-option label="非密" :value=1></el-option>
                    <el-option label="秘密" :value=2></el-option>
                    <el-option label="机密" :value=3></el-option>
                    <el-option label="绝密" :value=4></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="资产编号">
                  <el-input v-model="form1.assetNo" placeholder="请输入资产编号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备类型">
                  <el-select v-model="form1.Machine" placeholder="请选择设备类型">
                    <el-option label="专用机" value="01"></el-option>
                    <el-option label="windows" value="02"></el-option>
                    <el-option label="虚拟化服务器" value="03"></el-option>
                    <el-option label="非专用机的过程系统/Linux" value="04"></el-option>
                    <el-option label="安可通用机（桌面）" value="05"></el-option>
                    <el-option label="安可通用机（服务器）" value="06"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="地区">
                  <el-cascader v-model="form1.addressInfo" :options="options"
                    :props="{ expandTrigger: 'hover',value: 'label'}" @change="handleChange" class="inp1"
                    placeholder="请选择地区">
                  </el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="deploy-btn">
          <el-button type="primary" @click.native="pre">上一步</el-button>
          <el-button type="primary" @click.native="next">确定</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="选择部门" :visible.sync="dialogFormVisible">
      <!-- <el-table :data="gridData" :show-header="false" height="200" ref="multipleTable"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="DeptName"></el-table-column>
      </el-table> -->
      <el-tree
        ref="tree"
        :props="props"
        :load="loadNode"
        node-key="id"
        lazy
        show-checkbox
        @check-change="handleCheckChange">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cityData } from "../../assets/js/address";
export default {
  props: {
    lineType: {
      type: String,
    },
  },
  data() {
    return {
      form: {},
      props: {
          label: 'DeptName',
          children: 'zones'
        },
      UnitNameData: [],
      EmpData: [],
      form1: {
        DeptID: '',
        DeptName: '',
        UnitID: '',
        EmpName: '',
        SecLvl: 1,
        Machine: '',
        assetNo: '',
        addressInfo: '',
        HostType: '0',//0-网络版在线注册 1-单机版 2-网络版离线注册
        EmpID: '1',
        UnitName: '',
        serverIp:'',
        serverPort:'',
        licenseModel: ''
      },
      nextShow: true,
      show: "1",
      options: cityData,
      dialogFormVisible: false,
      gridData: [],
      multipleSelection: [],
      loadings: false,
    };
  },
  created() {
    let data=JSON.parse(sessionStorage.getItem('form'))
    this.form1.serverIp=data.ip
    this.form1.serverPort=data.port
    // this.generate()
  },
  mounted () {
    this.getUnitNameData()
  },
  methods: {
    handleEmpData (val) {
      console.log(val)
      this.form1.EmpID = val.EmpID
      this.form1.EmpName = val.EmpName
    },
    handleUnitId (val) {
      console.log(val)
      this.form1.UnitName = val.UnitName
      this.form1.UnitID= val.UnitID
    },
    handleCheckChange(data, checked) {
        if (checked) {
          let arr = data.id
          this.multipleSelection = data
          this.$refs.tree.setCheckedKeys([arr]); 
        }
        console.log(data, checked, this.multipleSelection);
      },
    loadNode(node, resolve) {
      console.log(node,"数据")
      let that = this
      let param = {
        data: {
          parentOrgId: "0",
          parentOrgName: "",
        }
      }
      this.$postForJson('vgmp/user/pullorgtree', param).then(res => {
        let data = res.data;
        console.log(data, "部门数据1")
        if (data.errorcode != "0") {
          this.$message.error(data.errormsg)
          console.log(data, "部门数据获取出错")
          return false
        }
        console.log(data.data.childNodeArray, "部门数据1");
        let empAllData = data.data.childNodeArray
        empAllData.forEach(item => {
          item.id = item.DeptID
        })
        console.log(empAllData);
        if (node.level === 0) {
          return resolve(empAllData);
        } else {
          console.log(node.data, "部门数据2参数")
          let params = {
            data: {
              parentOrgId: node.data.DeptID,
              parentOrgName: "",
            }
          }
          that.$postForJson('vgmp/user/pullorgtree', params).then(res => {
            let datas = res.data;
            console.log(data, "部门数据2")
            if (datas.errorcode != "0") {
              this.$message.error(data.errormsg)
              console.log("出错2")
              return false
            }
            console.log(datas.data.childNodeArray);
            let empAllDatas = datas.data.childNodeArray
            empAllDatas.forEach(item => {
              item.id = item.DeptID
            })
            console.log(empAllDatas);
            console.log("数据返回");
            return resolve(empAllDatas);
          })
        }

      })
        // if (node.level > 3) return resolve([]);
        // if (node.data.name === 'region1') {
        //   hasChild = true;
        // } else if (node.data.name === 'region2') {
        //   hasChild = false;
        // } else {
        //   hasChild = Math.random() > 0.5;
        // }

        // setTimeout(() => {
        //   var data;
        //   if (hasChild) {
        //     data = [{
        //       id: 3,
        //       name: 'zone' + this.count++
        //     }, {
        //       id: 4,
        //       name: 'zone' + this.count++
        //     }];
        //   } else {
        //     data = [];
        //   }

        //   resolve(data);
        // }, 500);
      },
    //获取单位名称数据
    getUnitNameData () {
      let param = {
        data: {
          parentOrgId: "",
          parentOrgName: "",
        }
      }
      this.$postForJson('vgmp/user/pullorgtree', param).then(res => {
        let data = res.data;
        if (data.errorcode != "0") {
          this.$message.error(data.errormsg)
          return false
        }
        console.log("获取单位名称数据");
        this.UnitNameData = data.data.childNodeArray
      })
    },
    handleChange(e) {
      console.log(e.join('-'))
      // this.form1.AddressInfo = e.join('-')
    },
    generate(randomFlag = false, min = 32, max = 32) {
      this.form1.UnitID = ''
      var s = [];
      var hexDigits = "0123456789abcdefghijklmn";
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      var uuid = s.join("");
      this.form1.UnitID = uuid;
      // this.infoForm.task_id=str
    },
    getpullusername(DeptID) {
      this.$postForJson('/vgmp/user/pullusername', { "data": { "DeptID": DeptID } }).then(res => {
        let data = res.data;
        if (data.errorcode != "0") {
          this.$message.error(data.errormsg)
          return false
        }
        this.EmpData = data.data.childNodeArray
        console.log(this.EmpData)
        // this.form1.EmpID = data.data.childNodeArray[0].EmpID
        // this.form1.EmpName = data.data.childNodeArray[0].EmpName
      })
    },
    confirm() {
      this.dialogFormVisible = false
      this.form1.EmpName = ''
      // this.$refs.multipleTable.clearSelection();
      console.log(this.multipleSelection)
      // this.form1.DeptID = this.multipleSelection[0].DeptID,
      //   this.form1.DeptName = this.multipleSelection[0].DeptName,
      //   this.form1.ParentID = "0"
      // this.getpullusername(this.multipleSelection[0].DeptID)
      this.form1.DeptID = this.multipleSelection.DeptID
      this.form1.DeptName = this.multipleSelection.DeptName
      this.form1.ParentID = this.multipleSelection.ParentID
      this.getpullusername(this.multipleSelection.DeptID)
    },
    deptOpen() {
      // let param = {
      //   data: {
      //     parentOrgId: "0",
      //     parentOrgName: "",
      //   }
      // }
      // this.$postForJson('vgmp/user/pullorgtree', param).then(res => {
      //   let data = res.data;
      //   if (data.errorcode != "0") {
      //     this.$message.error(data.errormsg)
      //     return false
      //   }
      //   console.log(data.data.childNodeArray);
      //   this.gridData = data.data.childNodeArray
      // })
      this.dialogFormVisible = true
    },
    handleSelectionChange(selection){
     this.multipleSelection = selection
      if(selection.length>1){
        this.$refs.multipleTable.clearSelection();
        this.$refs.multipleTable.toggleRowSelection(selection.pop());
      }
    },
    next() {
      let that = this
      // for (let item in this.form1) {
      //   if (this.form1[item]) {
      //     params[item] = this.form1[item];
      //   }
      // }
     this.form1.addressInfo = this.form1.addressInfo.join('-')
     let params = this.form1
      console.log(params)
      this.loadings = true
      this.$postForJson("vgmp/config/register", { data: params }).then((res) => {
        // let { result, tip } = res.data;
        let resData = res.data
        console.log(resData) 
          this.loadings = false
        if (resData.errorcode == 0) {
          that.$alert('保存成功！', '提示', {
            confirmButtonText: '确定',
            type: 'primary'
          }).then(() => {
            that.$emit('product')
          }).catch(() => {
          });
        } else {
          that.$message({
                message: resData.errormsg,
                type: 'error'
              });
        }
      });
    },
    pre() {
      this.$emit('pre')
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.colImg {
  border-right: 1px solid #ddd;
  height: 410px;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.el-form-item__label) {
  /* color: #ddd; */
  font-size: 18px;
}
.inp {
  width: 88%;
}
.inp1 {
  width: 100%;
}

.deploy-btn {
  position: fixed;
  text-align: right;
  bottom: 30px;
  right: 28%;
  /* background-color: #EEE; */
}
.deploy-btn1 {
  position: fixed;
  text-align: right;
  bottom: 40px;
  right: 45%;
  /* background-color: #EEE; */
}
.formDiv {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  /* background: rgba(13, 68, 98, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;  */
  margin: 0 20px;
  padding: 20px 0;
  /* //   transform: translateY(-20px); */
}
img {
  width: 150px;
}
</style>